<script type="text/javascript" src="/public/js/kendo/src/js/kendo.web.js"></script>
<script type="text/javascript" src="/public/js/kendo/src/js/cultures/kendo.culture.vi-VN.js"></script>
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.common.css">
<link rel="stylesheet" type="text/css" href="/public/js/kendo/src/styles/kendo.default.css">

<script type="text/javascript" src="/public/js/bootstrap/bootstrap-multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="/public/css/bootstrap-multiselect.css">

<?php
$domainItem = $this->domainItem;
$articleItem = $this->articleItem;
$content = '';
if($articleItem){
    $content = $articleItem->content;
}

?>
<style type="text/css">
    #top_control_container, #bottom_control_container{
        padding: 10px ;
        background-color: #d7d8d7;
    }
    #main_container{
        padding: 10px ;
        background-color: #e8e8e8;
    }
</style>
<hr />
<input type="hidden" id="articleId" value="<?php
if($articleItem) echo $articleItem->id;
?>">

<ol class="breadcrumb bc-3">
    <li>
        <a href="/<?php echo $domainItem->domain ?>/admin"><i class="entypo-home"></i>Home</a>
    </li>
    <li >
        <a href="/<?php echo $domainItem->domain ?>/tin-bai">Tin bài</a>
    </li>

    <li class="active">
        <strong><?php if($articleItem) echo 'Sửa tin bài';
            else echo 'Thêm tin bài';
            ?></strong>
    </li>

</ol>
<h3><?php if($articleItem) echo 'Sửa bài viết: '.$articleItem->header;
    else echo 'Thêm tin bài';
    ?> </h3>
<div id="top_control_container">
    <a class="btn btn-sm btn-blue btn-icon" href="javascript:saveArticle()" ><i class="entypo-floppy"></i>Lưu</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn btn-sm btn-blue btn-icon" href="javascript:saveArticle(true)"><i class="entypo-floppy"></i>Lưu và thêm mới</a>
</div>
<div id="main_container">
    <form class="form-horizontal form-groups-bordered" role="form">
        <div class="form-group">
            <label class="col-sm-3 control-label" for="field-1">Tiêu đề(*)</label>
            <div class="col-sm-5">
                <input id="txtHeader" class="form-control" type="text" value="<?php if($articleItem)echo $articleItem->header ?>"
                       required placeholder="Nhập tiêu đề bài viết, bắt buộc" >
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" for="txtSummarize">Mô tả</label>

            <div class="col-sm-5">
                <textarea id="txtSummarize" name="txtSummarize" style="width: 100%" rows="3"  class="k-textbox"><?php if($articleItem)echo $articleItem->sumarize ?></textarea>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Nhóm chính(*)</label>
            <div class="col-sm-5">
                <select id="cboMainCategory" class="form-control" >
                    <?php
                    if($articleItem){
                        $myMainCategory = $articleItem->getPrimaryCategory();
                    }else
                        $myMainCategory = array();

                    foreach ($this->allMainArticleGroup as $aCategory) {
                        $selected = '';
                        if($myMainCategory){
                            if($myMainCategory->id == $aCategory->id)
                                $selected = 'selected';
                        }

                        echo '<option '.$selected.' value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                    }
                    ?>
                </select>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-3 control-label" >Nhóm phụ</label>
            <div class="col-sm-5">
                <select id="cboSubCategory" class="form-control" multiple="multiple">
                    <?php
                    if($articleItem){
                        $mySubCategories = $articleItem->getSubCategories();
                    }else
                        $mySubCategories = array();

                    foreach ($this->allSubArticleGroup as $aCategory) {
                    $selected = '';
                    if($mySubCategories){
                        foreach ($mySubCategories as $aMyCategory) {
                            if($aMyCategory->id == $aCategory->id)
                                $selected = 'selected';
                        }
                    }
                    echo '<option '.$selected.' value="'.$aCategory->id.'">'.$aCategory->name.'</option>';
                    }
                    ?>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label" >Active</label>
            <div class="col-sm-5">
                <?php
                $checked = 'cheked';
                if($articleItem)
                    if($articleItem->active == 1)
                        $checked = 'checked';
                    else
                        $checked = '';
                else
                    $checked = 'checked';
                ?>
                <input  type="checkbox" id="chkActive" <?php echo $checked ?> >
            </div>
        </div>

        <div class="form-group">
            <div >
                <div class="col-xsm-12" style="margin: 5px; text-align: center; padding: 5px 20px; background-color: #c5e8f7">
                    <div >
                        <a style="color: #2c7ea1" href="javascript:getThumbImg();" ><i class="entypo-plus"></i>Chọn ảnh thumb</a>
                        &nbsp;&nbsp;&nbsp;
                        <a style="color: #2c7ea1" id="btnRemoveThumbImg" href="javascript:removeThumbImg();"  ><i class="entypo-minus"></i>Xóa ảnh</a>
                        <div style="margin: 0 auto; padding: 5px">
                            <img id = "imgThumb" style="max-width: 180px; max-height: 180px"
                                 src="<?php
                                 if($articleItem) echo $articleItem->thumbnail;
                                 ?>">
                        </div>

                    </div>
                </div>

            </div>
        </div>
        <div class="form-group">
            <div style="padding: 0px 5px;">

                    <div class="col-xsm-12 " style="background-color: #c5e8f7; padding: 10px 20px; border: 1px solid #CCC;  -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    border-radius: 5px 5px 0px 0px;">
                        <a  style="color: #2c7ea1" href="javascript:tougleEditor()"><i class="entypo-pencil"></i>&nbsp;&nbsp;Soạn nội dung</a>
                    </div>
                    <div class="col-xsm-12" style="min-height: 300px; margin: 0 auto;   ;border: 1px solid #CCC; background-color: #fff" id = "contentContainer">
                        <?php if($articleItem)  echo $content?>
                    </div>


            </div>
        </div>
    </form>
</div>
<div id="bottom_control_container">
    <a class="btn btn-sm btn-blue btn-icon" href="javascript:saveArticle()"  ><i class="entypo-floppy"></i>Lưu</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a class="btn btn-sm btn-blue btn-icon" href="javascript:saveArticle(true)" ><i class="entypo-floppy"></i>Lưu và thêm mới</a>
</div>

<script>
    $(document).ready(function(){
        $('#cboMainCategory').multiselect();
        $('#cboSubCategory').multiselect();
        srcOfThumb = $('#imgThumb').attr('src');
        if(!srcOfThumb)
        $('#btnRemoveThumbImg').hide();
    })
    function getThumbImg(){
        try{
            var finder = new CKFinder();
            finder.basePath = '/public/js/ckfinder/';
            finder.selectActionFunction = setThumbFile;
            finder.id="distribution";
            finder.language = 'vi';
            finder.popup();
        }catch(err){

        }
    }

    function removeThumbImg(){
        $("#imgThumb").attr("src", "" );
        $("#btnRemoveThumbImg").hide();
    }

    function setThumbFile( fileUrl )
    {
        $("#imgThumb").attr("src", fileUrl );
        $("#btnRemoveThumbImg").show();
    }


    var editor;
    function tougleEditor(){
        if ( editor ){
            editor.destroy();
            editor = null;
        }
        else
        editor = CKEDITOR.replace( "contentContainer" ,{
            customConfig : '/public/js/ckeditor/distribution_config.js',
            filebrowserBrowseUrl : '/public/js/ckfinder/ckfinder.html?id=distribution',
            filebrowserImageBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Images&id=distribution',
            filebrowserFlashBrowseUrl : '/public/js/ckfinder/ckfinder.html?Type=Flash&id=distribution',
            filebrowserUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=distribution',
            filebrowserImageUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=distribution',
            filebrowserFlashUploadUrl : '/public/js/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash&id=distribution'
        });
//        CKFinder.setupCKEditor( editor, { basePath : '../', skin : 'v' , configId : 'distribution'} ) ;
    }

    function saveArticle(goOn){
        goOn = typeof goOn !== 'undefined' ? goOn : false;
        if(!validate()) {
            flag = false;
            return;
        }

        name = $("#txtHeader").val();
        description = $("#txtSummarize").val();
        if(editor)
            content = editor.getData();
        else
            content = $("#contentContainer").html();
        thumbImage = $("#imgThumb").attr("src");
        categories = $("#cboMainCategory").val();
        subcategories = $("#cboSubCategory").val();
        id = $("#articleId").val();

//        ordernumber = $("#txtOrderNumber").data("kendoNumericTextBox");
//        order_number = ordernumber.value();

        active = $("#chkActive").is(':checked')?1:0;

//        $("#btnSaveArticle").removeAttr('href');

        var opts = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "10000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };
        $.blockUI({ message: 'Vui lòng chờ ... ' });

        $.post('<?php echo '/'.$domainItem->domain.'/admin/article/save' ?>',{id:id,
                name:name, description:description, content:content,
                thumbImage:thumbImage,  categories:categories, subcategories:subcategories, active:active}
            ,function(result){
                if (result.success){
                    $("#articleId").val(result.id);
                    if(!goOn)
                        window.location = '<?php echo '/'.$domainItem->domain.'/tin-bai'  ?>'
                    else
                        window.location = '<?php echo '/'.$domainItem->domain.'/tin-bai/them-moi' ?>'

                }else{
                    toastr.error("Lỗi: "+result.msg, "", opts);
                }
                $.unblockUI();

            },'json');

        $("#btnSaveArticle").attr("href", 'javascript:saveArticle()');
    }

    function validate(){

        var opts = {
            "closeButton": true,
            "debug": false,
            "positionClass": "toast-bottom-right",
            "onclick": null,
            "showDuration": "300",
            "hideDuration": "1000",
            "timeOut": "5000",
            "extendedTimeOut": "1000",
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        };

        if( !$('#txtHeader').val()){
            $('#txtHeader').focus();
            toastr.error("Vui lòng nhập tiêu đề", "", opts);
            return false;
        }

        if(editor)
            content = editor.getData();
        else
            content = $("#contentContainer").html();

        if( content.trim().length == 0)
        {
            toastr.error("Vui lòng nhập nội dung", "", opts);
            return false;
        }

        if(  !$("#cboMainCategory").val()){
            toastr.error("Vui lòng nhập chọn nhóm chính", "", opts);

            return false;
        }
        return true;

    }
</script>
